<template>
  <view class="vaccine-list-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input type="text" :placeholder="$t('vaccine.search.placeholder')" v-model="searchKey" />
      </view>
      <scroll-view scroll-x class="category-scroll" :show-scrollbar="false">
        <view class="category-list">
          <text 
            v-for="(category, index) in categories"
            :key="index"
            :class="{ active: currentCategory === category.value }"
            @tap="selectCategory(category.value)"
          >{{ $t(`vaccine.category.${category.value}`) }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 疫苗列表 -->
    <scroll-view 
      scroll-y 
      class="vaccine-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view 
        class="vaccine-item card"
        v-for="(vaccine, index) in filteredVaccines"
        :key="index"
        @tap="viewDetail(vaccine)"
      >
        <image :src="vaccine.image" mode="aspectFill" class="vaccine-image" />
        <view class="info">
          <view class="name-wrap">
            <text class="name">{{ $t(vaccine.nameKey) }}</text>
            <view class="tags">
              <text v-if="vaccine.price === 0" class="tag free">{{ $t('vaccine.tag.free') }}</text>
              <text v-if="vaccine.recommended" class="tag recommended">{{ $t('vaccine.tag.recommended') }}</text>
              <text v-if="vaccine.seasonal" class="tag seasonal">{{ $t('vaccine.tag.seasonal') }}</text>
            </view>
          </view>
          <text class="desc">{{ $t(vaccine.descKey) }}</text>
          <view class="footer">
            <view class="price-info">
              <text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
              <text class="free" v-else>{{ $t('vaccine.free') }}</text>
            </view>
            <button class="book-btn primary-btn" @tap.stop="bookVaccine(vaccine)">
              {{ $t('vaccine.book') }}
            </button>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>{{ $t('common.loading') }}</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredVaccines.length === 0">
        <image src="/static/empty/no-vaccine.png" mode="aspectFit" />
        <text>暂无相关疫苗</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索关键词
const searchKey = ref('')
const currentCategory = ref('all')

// 分类列表
const categories = [
  { value: 'all', label: '全部' },
  { value: 'covid', label: '新冠疫苗' },
  { value: 'flu', label: '流感疫苗' },
  { value: 'hpv', label: 'HPV疫苗' },
  { value: 'child', label: '儿童疫苗' }
]

// 疫苗列表数据
const vaccines = ref([
  {
    id: 1,
    nameKey: 'vaccine.list.covid.name',
    descKey: 'vaccine.list.covid.desc',
    image: '/static/vaccine/covid.jpg',
    price: 0,
    recommended: true,
    category: 'covid'
  },
  {
    id: 2,
    nameKey: 'vaccine.list.flu.name',
    descKey: 'vaccine.list.flu.desc',
    image: '/static/vaccine/flu.jpg',
    price: 180,
    seasonal: true,
    category: 'flu'
  },
  {
    id: 3,
    nameKey: 'vaccine.list.hpv.name',
    descKey: 'vaccine.list.hpv.desc',
    image: '/static/vaccine/hpv.jpg',
    price: 2800,
    recommended: true,
    category: 'hpv'
  }
])

// 分页相关
const pageSize = 10
const currentPage = ref(1)
const hasMore = ref(true)
const refreshing = ref(false)

// 筛选疫苗列表
const filteredVaccines = computed(() => {
  let result = vaccines.value
  
  // 搜索过滤
  if (searchKey.value) {
    const key = searchKey.value.toLowerCase()
    result = result.filter(vaccine => 
      vaccine.nameKey.toLowerCase().includes(key) ||
      vaccine.descKey.toLowerCase().includes(key)
    )
  }
  
  // 分类过滤
  if (currentCategory.value !== 'all') {
    result = result.filter(vaccine => vaccine.category === currentCategory.value)
  }
  
  return result
})

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category
}

// 查看详情
const viewDetail = (vaccine) => {
  uni.navigateTo({
    url: `/pages/vaccine/detail?id=${vaccine.id}`
  })
}

// 预约接种
const bookVaccine = (vaccine) => {
  uni.navigateTo({
    url: `/pages/vaccine/book?id=${vaccine.id}`
  })
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  // 重置页码
  currentPage.value = 1
  // 重新加载数据
  loadVaccines()
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const onLoadMore = () => {
  if (!hasMore.value) return
  currentPage.value++
  loadVaccines()
}

// 加载疫苗数据
const loadVaccines = () => {
  // 这里应该调用API获取数据
  // 模拟加载
  setTimeout(() => {
    if (currentPage.value >= 3) {
      hasMore.value = false
    }
  }, 1000)
}
</script>

<style lang="scss">
.vaccine-list-container {
  min-height: 100vh;
  background: $bg-color;
  
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx;
    box-shadow: $shadow-sm;
    
    .search-box {
      margin-bottom: 20rpx;
    }
    
    .category-scroll {
      white-space: nowrap;
      &::-webkit-scrollbar {
        display: none;
      }
      
      .category-list {
        padding: 10rpx 0;
        
        text {
          display: inline-block;
          font-size: 28rpx;
          color: $text-regular;
          padding: 12rpx 30rpx;
          margin-right: 20rpx;
          border-radius: $radius-xl;
          transition: all 0.3s;
          
          &.active {
            color: #fff;
            background: $primary-gradient;
          }
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
  
  .vaccine-list {
    height: calc(100vh - 200rpx);
    padding: 20rpx;
    
    .vaccine-item {
      display: flex;
      margin-bottom: 20rpx;
      padding: 20rpx;
      
      .vaccine-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: $radius-md;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .name-wrap {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12rpx;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
          }
          
          .tags {
            display: flex;
            gap: 10rpx;
            
            .tag {
              font-size: 22rpx;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              
              &.free {
                color: $success;
                background: rgba($success, 0.1);
              }
              
              &.recommended {
                color: $primary-color;
                background: $primary-light;
              }
              
              &.seasonal {
                color: $warning;
                background: rgba($warning, 0.1);
              }
            }
          }
        }
        
        .desc {
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
          flex: 1;
          @include multi-ellipsis(2);
        }
        
        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          
          .price-info {
            .price {
              font-size: 32rpx;
              color: $danger;
              font-weight: bold;
            }
            
            .free {
              font-size: 32rpx;
              color: $success;
              font-weight: bold;
            }
          }
          
          .book-btn {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .empty-state {
    padding: 120rpx 0;
    text-align: center;
    
    image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: $text-secondary;
    }
  }
}
</style> 